<template>
<view class="container">
    <scroll-view class="topic-list" scroll-y="true" >
        <navigator class="item"  url="../topicDetail/topicDetail">
            <image class="img" src="/static/demo/idx-zhuanti.jpg"></image>
            <view class="info">
                <text class="title">标题标题标题标题</text>
                <text class="desc">描述描述描述描述描述描述</text>
                <text class="price">11元起</text>
            </view>
        </navigator>
        <navigator class="item"  url="../topicDetail/topicDetail">
            <image class="img" src="/static/demo/idx-zhuanti.jpg"></image>
            <view class="info">
                <text class="title">标题标题标题标题</text>
                <text class="desc">描述描述描述描述描述描述</text>
                <text class="price">11元起</text>
            </view>
        </navigator>
        <navigator class="item"  url="../topicDetail/topicDetail">
            <image class="img" src="/static/demo/idx-zhuanti.jpg"></image>
            <view class="info">
                <text class="title">标题标题标题标题</text>
                <text class="desc">描述描述描述描述描述描述</text>
                <text class="price">11元起</text>
            </view>
        </navigator>
        <navigator class="item"  url="../topicDetail/topicDetail">
            <image class="img" src="/static/demo/idx-zhuanti.jpg"></image>
            <view class="info">
                <text class="title">标题标题标题标题</text>
                <text class="desc">描述描述描述描述描述描述</text>
                <text class="price">11元起</text>
            </view>
        </navigator>
        <view class="page">
            <view class="prev disabled" bindtap="prevPage">上一页</view>
            <view class="next disabled" bindtap="nextPage">下一页</view>
        </view>
    </scroll-view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
page ,.container{
   width: 750rpx;
    height: 100%;
    overflow: hidden;
    background: #f4f4f4;
}
.topic-list{
    width: 750rpx;
    height: 100%;
    overflow: hidden;
    background: #f4f4f4;
}

.topic-list .item{
    width: 100%;
    height: 625rpx;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20rpx;
}

.topic-list .img{
    width: 100%;
    height: 415rpx;
}

.topic-list .info{
    width: 100%;
    height: 210rpx;
    overflow: hidden;
}

.topic-list .title{
    display: block;
    text-align: center;
    width: 100%;
    height: 33rpx;
    line-height: 35rpx;
    color: #333;
    overflow: hidden;
    font-size: 35rpx;
    margin-top: 30rpx;
}

.topic-list .desc{
    display: block;
    text-align: center;
    position: relative;
    width: auto;
    height: 24rpx;
    line-height: 24rpx;
    overflow: hidden;
    color: #999;
    font-size: 24rpx;
    margin-top: 16rpx;
    margin-bottom: 30rpx;
}

.topic-list .price{
    display: block;
    text-align: center;
    width: 100%;
    height: 27rpx;
    line-height: 27rpx;
    overflow: hidden;
    color: #b4282d;
    font-size: 27rpx;
}


.page{
    width: 750rpx;
    height: 108rpx;
    background: #fff;
    margin-bottom: 20rpx;
}

.page view{
    height: 108rpx;
    width: 50%;
    float: left;
    font-size: 29rpx;
    color: #333;
    text-align: center;
    line-height: 108rpx;
}

.page .prev{
    border-right: 1px solid #D9D9D9;
}

.page .disabled{
    color: #ccc;
}
</style>
